<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/global.css">

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #mask,
        #result {
            width: 480px;
            height: 720px;
            user-select: none;
        }


        #mask {
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <canvas id="result"></canvas>
    <canvas id="mask"></canvas>

    <script>
        /** @type {HTMLCanvasElement} */
        var result = document.querySelector('#result')
        /** @type {CanvasRenderingContext2D} */
        var resultContext = result.getContext('2d')

        /** @type {HTMLCanvasElement} */
        var mask = document.querySelector('#mask')
        /** @type {CanvasRenderingContext2D} */
        var maskContext = mask.getContext('2d')
        /** 是否允许刮开 */
        var isScratch = false;


        var resultImage = new Image();
        var maskImage = new Image();

        var lastX = 0;
        var lastY = 0


        mask.hidden = true;

        resultImage.src = 'assets/scratchCard.jpg'
        maskImage.src = 'assets/scratchCard.png'


        resultImage.onload = function () {
            result.width = resultImage.width;
            result.height = resultImage.height;
            resultContext.drawImage(resultImage, 0, 0, result.width, result.height)

            // TODO 随机卡号

            // TODO 随机条码

            // TODO 随机奖金

            // TODO 随机纹理
        }
        maskImage.onload = function () {
            mask.width = maskImage.width;
            mask.height = maskImage.height;
            maskContext.drawImage(maskImage, 0, 0, mask.width, mask.height)
            mask.hidden = false;
        }

        mask.onmousedown = function (e) {
            isScratch = true

            var x = e.clientX - parseInt(mask.offsetLeft);
            var y = e.clientY - parseInt(mask.offsetTop);

            x = parseInt(x / mask.clientWidth * mask.width)
            y = parseInt(y / mask.clientHeight * mask.height)

            lastX = x;
            lastY = y;
        }
        mask.onmouseup = function () {
            isScratch = false;
        }
        mask.onmousemove = function (e) {
            if (isScratch) {
                var x = e.clientX - parseInt(mask.offsetLeft);
                var y = e.clientY - parseInt(mask.offsetTop);

                x = parseInt(x / mask.clientWidth * mask.width)
                y = parseInt(y / mask.clientHeight * mask.height)
                maskContext.lineWidth = 20;
                maskContext.beginPath();
                maskContext.moveTo(lastX, lastY);
                maskContext.lineTo(x, y)
                maskContext.globalCompositeOperation = "destination-out";
                maskContext.closePath();
                maskContext.stroke()
                lastX = x;
                lastY = y;
            }
        }
    </script>
</body>

</html>